<template>
  <div>
    <el-dialog
      v-model="show"
      title="分票提单"
      :show-close="false"
    >
      <el-button
        type="primary"
        @click="addChildData"
        style="margin-bottom: 16px;"
      >
        新增
      </el-button>
      <el-table
        :data="detailDataCopy"
        stripe
        border
        :cell-class-name="tableCellClassName"
        size="small"
        @cell-click="cellClick"
      >
        <el-table-column label="箱号">
          <template #default="scope">
            <div v-if="scope.row.index === rowIndex &&
        scope.column.index === columnIndex
        ">
              <el-input
                v-model="scope.row.ctnNo"
                ref="ctnNoRef"
                size="small"
                disabled
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.ctnNo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="分提单">
          <template #default="scope">
            <div v-if="scope.row.index === rowIndex &&
        scope.column.index === columnIndex
        ">
              <el-input
                v-model="scope.row.blcode"
                ref="blcodeRef"
                size="small"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.blcode }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="件数">
          <template #default="scope">
            <div v-if="scope.row.index === rowIndex &&
        scope.column.index === columnIndex
        ">
              <el-input-number
                v-model="scope.row.digit"
                ref="digitRef"
                size="small"
              >
              </el-input-number>
            </div>
            <span v-else>
              {{ scope.row.digit }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="毛重">
          <template #default="scope">
            <div v-if="scope.row.index === rowIndex &&
        scope.column.index === columnIndex
        ">
              <el-input-number
                v-model="scope.row.grossWeight"
                ref="grossWeightRef"
                size="small"
              >
              </el-input-number>
            </div>
            <span v-else>
              {{ scope.row.grossWeight }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="体积">
          <template #default="scope">
            <div v-if="scope.row.index === rowIndex &&
        scope.column.index === columnIndex
        ">
              <el-input-number
                v-model="scope.row.volume"
                ref="volumeRef"
                size="small"
              >
              </el-input-number>
            </div>
            <span v-else>
              {{ scope.row.volume }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="品名">
          <template #default="scope">
            <div v-if="scope.row.index === rowIndex &&
        scope.column.index === columnIndex
        ">
              <el-input
                v-model="scope.row.cargoDescription"
                ref="cargoDescriptionRef"
                size="small"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.cargoDescription }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template #default="scope">
            <div v-if="scope.row.index === rowIndex &&
        scope.column.index === columnIndex
        ">
              <el-input
                v-model="scope.row.memo"
                ref="memoRef"
                size="small"
              >
              </el-input>
            </div>
            <span v-else>
              {{ scope.row.memo }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-popconfirm
              title="确定删除本条数据吗？"
              @confirm="deleteChildData(scope.$index)"
            >
              <template #reference>
                <el-button
                  link
                  type="danger"
                >删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            link
            @click="cancel"
          >取消</el-button>
          <el-button
            type="primary"
            @click="submit"
          > 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { ElMessageBox } from "element-plus";
export default defineComponent({
  props: {
    //详细数据
    detailData: {
      type: Array,
      default: () => [],
    },
    //
    outshow: {
      type: Boolean,
      default: false,
    },
    //必传 箱号
    boxName: {
      type: String,
      default: "",
    },
    //必传 件数
    boxdigit: {
      type: Number,
      default: 0,
    },
    //必传 毛重
    boxgrossWeight: {
      type: Number,
      default: 0,
    },
    //必传 体积
    boxvolume: {
      type: Number,
      default: 0,
    },
  },
  emits: ["update:detailData", "update:outshow"],
  computed: {
    data: {
      get() {
        return this.detailData;
      },
      set(value) {
        this.$emit("update:detailData", value);
      },
    },
    show: {
      get() {
        return this.outshow;
      },
      set(value) {
        this.$emit("update:outshow", value);
      },
    },
  },
  data() {
    return {
      rowIndex: -1, //行索引
      columnIndex: -1, //列索引
      //存储修改 当确定时 才可以赋值给data
      detailDataCopy: [],
    };
  },
  methods: {
    tableCellClassName({ row, column, rowIndex, columnIndex }) {
      column.index = columnIndex;
      row.index = rowIndex;
    },
    //单元格被点击时会触发该事件
    cellClick(row, column, cell, event) {
      this.rowIndex = row.index;
      this.columnIndex = column.index;

      this.$nextTick(() => {
        if (column.label == "箱号") {
          this.$refs["ctnNoRef"].focus();
          //   console.log(this.$refs["ctnNoRef"]); 自动聚焦失效
        } else if (column.label == "分提单") {
          this.$refs["blcodeRef"].focus();
        } else if (column.label == "件数") {
          this.$refs["digitRef"].focus();
        } else if (column.label == "毛重") {
          this.$refs["grossWeightRef"].focus();
        } else if (column.label == "体积") {
          this.$refs["volumeRef"].focus();
        } else if (column.label == "品名") {
          this.$refs["cargoDescriptionRef"].focus();
        } else if (column.label == "备注") {
          this.$refs["memoRef"].focus();
        }
      });
    },
    addChildData() {
      // 每次计算当前的件数，毛重，体积的数量
      let digit = 0;
      let grossWeight = 0;
      let volume = 0;
      this.detailDataCopy.forEach(item => {
        digit += item.digit;
        grossWeight += item.grossWeight;
        volume += item.volume;
      });
      this.detailDataCopy.push({
        ctnNo: this.boxName,
        blcode: null,
        digit: this.boxdigit - digit > 0 ? this.boxdigit - digit : 0,
        grossWeight: this.boxgrossWeight - grossWeight > 0 ? this.boxgrossWeight - grossWeight : 0,
        volume: this.boxvolume - volume > 0 ? this.boxvolume - volume : 0,
        cargoDescription: null,
        memo: null,
      });
    },
    deleteChildData(index) {
      this.detailDataCopy.splice(index, 1);
    },
    cancel() {
      this.show = false;
    },
    submit() {
      let sumDigit = 0;
      let sumGrossWeight = 0;
      let sumVolume = 0;
      this.detailDataCopy.forEach((item) => {
        sumDigit += item.digit;
        sumGrossWeight += item.grossWeight;
        sumVolume += item.volume;
      });
      if (
        sumDigit == this.boxdigit &&
        sumGrossWeight == this.boxgrossWeight &&
        sumVolume == this.boxvolume
      ) {
        this.data = this.detailDataCopy;
        this.show = false;
      } else {
        this.$message.error("件数，毛重，体积与装箱信息不一致，请检查!");
      }
    },
  },
  watch: {
    "show"(newVal, oldVal) {
      if (newVal) {
        this.detailDataCopy = JSON.parse(JSON.stringify(this.detailData));
      }
    }
  },
  mounted() { },
});
</script>

<style
  lang="scss"
  scoped
></style>
